<!--
*@Author: QWP
*@Description: 地图中安全生产的详情
*@Date: 2024-11-15 09:09:49
-->
<template>
  <u-drawer v-bind="$attrs"
    title="安全生产隐患详情"
    :maskClosable="true"
    width="40%"
    class="u-security-detial-drawer">
    <a-layout class="f-h-100">
      <u-table-header style="padding: 0;">
        <u-busi-card title="企业信息"
          style="position: relative">
          <u-form :elements="formEls"
            :model="data"
            :gutter="16"
            :loading="loading"
            class="u-security-detial-form"
            ref="formRef">
          </u-form>
          <div class="u-qr-srcurity">
            <b>安全码</b>
            <a-image :src="data.qrCodeUrl" 
              width="60px" >
            </a-image>
          </div>
        </u-busi-card>
      </u-table-header>
      <u-table-content>
        <u-table
          :columns="columns"
          :data="tabData"
          :rowSelection="null"
          v-model:pagination="pagenation"
          :loading="loading"
        ></u-table>
      </u-table-content>
    </a-layout>
  </u-drawer>
</template>

<script lang='ts' setup>
import { ref, reactive, computed, onMounted, watch, useAttrs, h } from 'vue' 
import { storeToRefs } from 'pinia'
import { useRoute, useRouter } from 'vue-router'
import { Image, ImagePreviewGroup } from 'ant-design-vue';
import * as enterpriseFileAPI from '@/service/emergency/enterpriseFile';
import { nullC } from '@/util/common';

const props = defineProps<{
  data: any,
}>()

const attrs = useAttrs()

const riskOriginTypeOptions = ref([
  { label: '企业自查', value: '1' },
  { label: '政府排查', value: '2' },
  { label: '其他', value: '7' },
]);

const labelWidth = '100px'
const formEls: Array<_IFormEl> = reactive([
  { label: '企业名称', key: 'entName', col: { span: 20 }, element: 'text', 
    formItemProps: { labelWidth } 
  },
  { label: '统一信用代码', key: 'unifiedCode', col: { span: 8 }, element: 'text', 
    formItemProps: { labelWidth } 
  },
  { label: '法人', key: 'legalPerson', col: { span: 8 }, element: 'text', 
    formItemProps: { labelWidth } 
  },
  { label: '安全负责人', key: 'safetyAdminPerson', col: { span: 8 }, element: 'text', 
    formItemProps: { labelWidth } 
  },
  { label: '安全负责人联系方式', key: 'safetyAdminPersonPhone', col: { span: 8 }, element: 'text', 
    formItemProps: { labelWidth } 
  },
  { label: '行业类别', key: 'industryName', col: { span: 8 }, element: 'text', 
    formItemProps: { labelWidth } 
  },
  { label: '地址', key: 'address', col: { span: 24 }, element: 'text', 
    formItemProps: { labelWidth } 
  },
])

let pagenation = reactive({
  total: 0,
  current: 1,
  pageSize: 50,
  showTotal: total => `共 ${total} 条`,
});
const loading = ref<boolean>(false)
const tabData = ref<any[]>([])
let columns: Array<TableColumnProps> = reactive([
  { dataIndex: 'ROW_ID',
    title: '序号',
    width: 50,
    align: 'center',
    customRender: ({ text, record, index }) => {
      return index + 1;
    },
  },
  { dataIndex: 'hazardLevel',
    title: '隐患级别 ',
    width: 120,
    align: 'center',
    customRender: ({ text, record, index }) => text || '--',
  },
  { dataIndex: 'riskOriginType',
    title: '隐患来源 ',
    width: 120,
    align: 'center',
    customRender: ({ text, record, index }) => {
      let info = riskOriginTypeOptions.value.find(i => i.value == text);
      return info ? info['label'] : '--'
    },
  },
  {
    dataIndex: 'riskDescribe',
    title: '隐患描述 ',
    width: 200,
    align: 'center',
    customRender: ({ text, record, index }) => text ? text : '--',
  },
  {
    dataIndex: 'imageUrl',
    title: '隐患图片 ',
    width: 120,
    customRender: ({ text, record, index }) => text ? renderImg(text) : ''
  },
  {
    dataIndex: 'upgradeTypeName',
    title: '隐患类别 ',
    width: 120,
    align: 'center',
    customRender: ({ text, record, index }) => text ? text : '--',
  },
  {
    dataIndex: 'limitDate',
    title: '整改期限 ',
    width: 100,
    align: 'center',
    customRender: ({ text, record, index }) => text ? text : '--',
  },
  {
    dataIndex: 'checkTime',
    title: '检查时间',
    width: 200,
    align: 'center',
    customRender: ({ text, record, index }) => text ? text : '--',
  },
  {
    dataIndex: 'checkRecordName',
    title: '检查记录名称',
    width: 120,
    align: 'center',
    customRender: ({ text, record, index }) => text ? text : '--',
  },
]);

const renderImg = (url: string): any => {
  let urls = url.split(',');
  let arr = urls.map((src, index) => {
    return h(Image, { src: src, width: index == 0 ? 80 : 0, height: 80 })
  })
  return h(ImagePreviewGroup, () => arr)
}

const searchF = reactive({
  model: {
    upgradeStateName: "超期未整改",
    keywords: null,
  },
})
const getData = async (current?: number) => {
  loading.value = true;
  try {
    if (current == 1) {
      pagenation.value.current = 1;
    }
    searchF.model.entId = nullC(props.data['entId'])
    searchF.current = pagenation.current;
    searchF.size = pagenation.pageSize;
    const res = await enterpriseFileAPI.getCompany(searchF);
    if (res.code == 0) {
      tabData.value = res.data.records || [];
      pagenation.value.total = res.data.total;
    }
  } catch (error) {}
  loading.value = false;
}

watch(() => attrs.open, (nval, oval) => {
  if(nval == true) {
    getData()
  }
}, { immediate: true, deep: true })

</script>

<style lang='scss'>
.u-security-detial-drawer {
  .ant-drawer-body {
    padding: 0 12px
  }
  .u-qr-srcurity{
    position: absolute; 
    top: -18px; 
    right: 0; 
    display: flex; 
    flex-direction: column;
    justify-content: center;
    b {
      text-align: center;
    }
  }
  .u-security-detial-form {
    .ant-form-item-label {
      font-weight: bold;
    }
  }
}
</style>